import './index.less'
import {CnBoldSpan, CnNormalP} from '@/components/text'
import {AlarmMsgCard, AlarmMsgCardLoading} from './components/alarmMsgCard'
import {ParamCard} from './components/paramCard'
import {WaterAnalyzeCard, WaterAnalyzeCardLoading} from './components/waterAnalyzeCard'
import {WaterOverviewCard, WaterOverviewCardLoading} from './components/waterOverviewCard'
import {uSelectWebSingleDevDataAnalyse} from '@/api/singleDevParams'
import useGlobalAPI from '@/hooks/useGlobalAPI'
import {Dayjs} from 'dayjs'
export default defineComponent({
  name: 'singleDevParams',
  setup() {
    const {route} = useGlobalAPI()
    const devId = computed<string>(() => route.query.devId as string)

    const state = reactive<{
      startTime: Dayjs | undefined
      endTime: Dayjs | undefined
      pageData: SingleDevParams.DevDataAnalyse | undefined
      pageLoading: boolean
    }>({
      startTime: undefined,
      endTime: undefined,
      pageData: undefined,
      pageLoading: false
    })

    function getPageData() {
      if (!devId.value) return
      const startTime = state.startTime?.format('YYYY-MM-DD HH:00:00')
      const endTime = state.endTime?.format('YYYY-MM-DD HH:59:59')
      state.pageLoading = true
      uSelectWebSingleDevDataAnalyse({devId: devId.value, startTime, endTime})
        .then(res => {
          state.pageData = res.data
          state.pageLoading = false
        })
        .catch(err => {})
    }

    onMounted(() => {
      getPageData()
    })

    return () =>
      route.path === '/CBC/dataOverview/singleDevParams' ? (
        <div class=''>
          <div class='mt-11 text-20'>
            <CnBoldSpan class='text-20 mr-16'>设备水质数据</CnBoldSpan>
            <CnBoldSpan class='text-20'>
              {state.pageData?.devName ? state.pageData.devName : ''}
            </CnBoldSpan>
          </div>
          <CnNormalP class='mt-6 text-4xText'>
            查看设备检测到的水质数据，并根据数据优化您的运营
          </CnNormalP>
          <div class='mt-26 grid grid-cols-3 gap-x-20 gap-y-20 relative'>
            {state.pageData
              ? [
                  <WaterOverviewCard
                    pageData={state.pageData}
                    onDateRangeChange={data => {
                      state.startTime = data[0]
                      state.endTime = data[1]
                      getPageData()
                    }}
                    pageLoading={state.pageLoading}
                  ></WaterOverviewCard>,
                  <WaterAnalyzeCard pageData={state.pageData}></WaterAnalyzeCard>,
                  <AlarmMsgCard pageData={state.pageData}></AlarmMsgCard>,
                  ...state.pageData.paramList.map(item => <ParamCard paramData={item}></ParamCard>)
                ]
              : [
                  <WaterOverviewCardLoading></WaterOverviewCardLoading>,
                  <WaterAnalyzeCardLoading></WaterAnalyzeCardLoading>,
                  <AlarmMsgCardLoading></AlarmMsgCardLoading>
                ]}
          </div>
        </div>
      ) : (
        <router-view></router-view>
      )
  }
})
// 30 36 30 30
